<template>
  <div class="data-type">
    <normalDataTypeVue
      v-if="flag"
      v-model="dataTypeForm.normalDataType"
    ></normalDataTypeVue>
    <otherDataTypeVue
      v-if="flag"
      :title="'枚举类型'"
      v-model="dataTypeForm.enumerationDataType"
    ></otherDataTypeVue>
    <otherDataTypeVue
      v-if="flag"
      :title="'结构体'"
      v-model="dataTypeForm.structDataType"
    ></otherDataTypeVue>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, PropType } from 'vue'
import normalDataTypeVue from './cmps/normal-data-type.vue'
import otherDataTypeVue from './cmps/other-data-type.vue'
import { INormalDataType, IOtherDataType } from './types'
import formatString from '@/render/utils/trim'
import { IDataType } from '@/render/store/drives/types'

export default defineComponent({
  components: { normalDataTypeVue, otherDataTypeVue },
  props: {
    modelValue: {
      type: Array as PropType<IDataType[]>,
      dafault: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const flag = ref(false)
    const formData = ref(props.modelValue)

    const dataTypeForm = ref({
      normalDataType: new Array<INormalDataType>(),
      enumerationDataType: new Array<IOtherDataType>(),
      structDataType: new Array<IOtherDataType>()
    })

    const handleDataTypes = () => {
      if (formData.value != null) {
        for (let index = 0; index < formData.value.length; index++) {
          const element = formData.value[index]
          if (element.type === 'type') {
            dataTypeForm.value.normalDataType.push({
              name: element.name,
              type: formatString(element.value) ?? undefined,
              isNew: element.isNew,
              list: element.values
            })
          } else if (element.type === 'enum') {
            dataTypeForm.value.enumerationDataType.push({
              name: element.name,
              content: formatString(element.value),
              isNew: element.isNew
            })
          } else if (element.type === 'struct') {
            dataTypeForm.value.structDataType.push({
              name: element.name,
              content: formatString(element.value),
              isNew: element.isNew
            })
          }
        }
      }
    }

    const replyDataTypes = (dataTypeForm: any): IDataType[] => {
      const temps: IDataType[] = []
      dataTypeForm.normalDataType.forEach((item: any) => {
        temps.push({
          name: item.name,
          type: 'type',
          value: item.type,
          values: item.values,
          isNew: item.isNew
        })
      })
      dataTypeForm.enumerationDataType.forEach((item: any) => {
        temps.push({
          name: item.name,
          type: 'enum',
          value: item.content,
          values: [],
          isNew: item.isNew
        })
      })
      dataTypeForm.structDataType.forEach((item: any) => {
        temps.push({
          name: item.name,
          type: 'struct',
          value: item.content,
          values: [],
          isNew: item.isNew
        })
      })
      return temps
    }

    watch(
      dataTypeForm,
      (n) => {
        emit('update:modelValue', replyDataTypes(n))
      },
      {
        deep: true
      }
    )

    handleDataTypes()
    flag.value = true

    return { flag, dataTypeForm }
  }
})
</script>

<style scoped>
.data-type > div:nth-child(-n + 2) {
  margin-bottom: 10px;
}
</style>
